<template>
  <div class="input_box">
    <i v-if="icon" :class="icon"></i>
    <input
      :placeholder="placeholder"
      :type="type"
      :value="value"
      @input="$emit('update:value', $event.target.value)"
      @keyup.enter="onEnter"
    />
    <SubmitButton
      size="small"
      v-if="button"
      primary-color="white"
      secondary-color="darkgrey"
      @click="buttonOnClick"
    >{{ button }}</SubmitButton>
  </div>
</template>

<script>
import SubmitButton from "./SubmitButton.vue";

export default {
  components: { SubmitButton },
  props: {
    type: String,
    icon: String,
    placeholder: String,
    button: String | Number,
    buttonOnClick: Function,
    onEnter: Function,
    value: {
      type: String,
      required: true
    }
  },
  setup() {
  }
}
</script>

<!--suppress CssInvalidPseudoSelector -->
<style scoped lang="less">
.input_box {
  --input-height: 40px;
  height: fit-content;
  position: relative;
  width: 250px;
  background-color: black;
  border-radius: var(--input-height);
  font-size: calc(var(--input-height) / 2.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  & > i {
    text-align: center;
    width: var(--input-height);
  }

  & > .submit_button {
    margin-right: calc(var(--input-height) / 5);
  }

  & > input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    color: inherit;
    box-shadow: none;
    font-size: inherit;
    caret-color: white;
    background-color: transparent;
    height: var(--input-height);
    padding-left: 0;
    padding-right: calc(var(--input-height) / 2);

    &::-ms-reveal {
      color: white;
      border-radius: 50%;
      background-color: white;
    }

    &::-ms-clear {
      color: white;
      border-radius: 50%;
      background-color: white;
    }

    // 修改自动填充已保存信息的样式
    &:-internal-autofill-previewed,
    &:-internal-autofill-selected {
      transition: background-color 5000s ease-in-out 0s !important;
      //box-shadow: inset 0 0 0 1000px #3e3e3e !important; // 改变了背景色
      -webkit-text-fill-color: white; // 改变了字体颜色
    }
  }

  & > i ~ input {
    //padding-left: var(--input-height);
    //padding-right: calc(var(--input-height) / 1.5);
  }
}
</style>